<template>
<div class="userInfo">
  <div class="userInfo" v-if="snapshotInfo.status!==0">
    <h1>帮助用户：</h1>
    <div class="block">
      <el-avatar :size="100"  :src="helpUserInfo.photoUrl"></el-avatar>
    </div>
    <div class="userName">
      <h3>{{ helpUserInfo.userName }}<i class="el-icon-star-on"></i></h3>
      <el-tag  size="small" type="info">刚刚活跃</el-tag>
      <div class="prestige">
        <span>信誉度：</span>
        <el-rate
            v-model="helpUserInfo.creditScore"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
        </el-rate>
      </div>
    </div>
  </div>

  <el-dialog title="评价对方" :visible.sync="dialogFormVisible">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="评价内容" :label-width="formLabelWidth">
        <el-input v-model="ruleForm.comment" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="评分" prop="value" :label-width="formLabelWidth">
        <el-rate
            v-model="ruleForm.value"
            show-text>
        </el-rate>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>

  <div v-if="snapshotInfo.status===0">
    <h1>还没有人接单，快去通知别人吧！</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===1">
    <h1>是否同意该订单</h1>
    <el-button plain @click="HandUpdateSnapshotInfo(3)">拒绝</el-button>
    <el-button type="warning" @click="HandUpdateSnapshotInfo(2)" plain>同意</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===2">
    <h2>是否完成订单：</h2>
    <el-button type="primary" @click="HandUpdateSnapshotInfo(5)">完成</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===3">
    <h1>您取消了订单！</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===4">
    <el-button type="primary" @click="addOrder">重新发布</el-button>
    <h1>帮助用户取消了订单！</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===5 && snapshotInfo.evaluationStatus === 0">
    <el-button type="primary" @click="HandUpdateEvaluationStatus(1)">评价对方</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===5 && snapshotInfo.evaluationStatus === 2">
    <el-button type="primary" @click="HandUpdateEvaluationStatus(3)">评价对方</el-button>
  </div>
  <div class="btn" v-if="snapshotInfo.status===5 && (snapshotInfo.evaluationStatus === 1 || snapshotInfo.evaluationStatus === 3)">
    <h1>订单已完成</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===6">
    <el-button type="primary" @click="addOrder">重新发布</el-button>
    <h1>订单已经被帮助用户取消了</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===7">
    <h1>订单已经被您取消了</h1>
  </div>
  <div class="btn" v-if="snapshotInfo.status===8">
    <h1>订单已过期</h1>
    <el-button type="primary" @click="addOrder">重新发布</el-button>
  </div>
</div>
</template>

<script>
import {mapState} from "vuex";
import {reqEvaluate, reqUpdateSnapshotOrder, reqUserInfoById} from "@/api";

export default {
  name: "UserInfo",
  data(){
    return{
      helpUserInfo:{},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      evaluationStatus: null,
      ruleForm: {
        value: null,
        comment: '',
      }
    }
  },
  computed: {
    ...mapState({
      userDetailInfo: state => state.helpOrderItems.userDetail,
      snapshotInfo: state => state.myOrder.SnapshotInfo,
    })
  },
  async mounted() {
    if (this.snapshotInfo.status!=0) {
      await reqUserInfoById(this.snapshotInfo.helpUserCode).then((item) => {
        this.helpUserInfo = item
      })
    }
  },
  methods:{

    //提交表单
    async submitForm() {
      if (this.ruleForm.value != 0){
        //状态
        //reqEvaluate = (evaluationStatus,evaluatedUserId,commentUserId,orderInitiateCode,comment,grade)
        // reqEvaluate(state,this.snapshotInfo.helpUserCode,this.userDetailInfo.id,this.snapshotInfo.orderInitiateCode)
        await reqEvaluate(this.evaluationStatus,this.snapshotInfo.helpUserCode,this.userDetailInfo.id,this.snapshotInfo.id,this.ruleForm.comment,this.ruleForm.value).then(()=>{
          this.$store.dispatch('GetSnapshotInfo',this.snapshotInfo.id);
          this.dialogFormVisible = false
        })
      }else {
        this.$message({message: '请选择评分', type: 'warning', showClose: true});
      }
    },
    HandUpdateEvaluationStatus(state){
      this.dialogFormVisible = true
      this.evaluationStatus = state
    },
    addOrder(){
    this.$router.push({
      name: 'addOrder',
      query: {
        orderInitiateCode: this.snapshotInfo.orderInitiateCode
      }
    })},
    async HandUpdateSnapshotInfo(status) {
      const loading = this.$loading({
        lock: true,
        text: '提交中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      await reqUpdateSnapshotOrder(this.snapshotInfo.id,status).then(() => {
        loading.close();
        this.$message({message: '提交成功', type: 'success', showClose: true});
      })
      await this.$store.dispatch('UpdateSnotInfo', status);
    }
  }
}
</script>

<style scoped>
.userInfo{
  width: 90%;
  height: 120px;
  margin-left: 3%;
}
.userInfo .block{
  padding-top: 10px;
  float: left;
}
.userName{
  float: left;
  margin-top: 30px;
  margin-left: 40px;
}
.userName h3{
  margin-top: 2px;
  float: left;
}
.userName el-avatar{
  float: right;
  padding-top: 10px;
}
.prestige{
  width: 250px;
  margin-top: 10px;
}
.prestige span{
  float: left;
}
.prestige .el-rate{
  margin-left: 50px;
}
.time{
  margin-top: 10px;
  margin-left: 30px;
}
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.btn .el-button{
  margin-left: 40px;
}


</style>
